<!--
type Ref 的作用:
  1、TypeScript 中，type Ref 是 Vue 提供的一个泛型类型，用于描述响应式变量的类型
  2、它可以确保 ref 创建的响应式变量有明确的类型，增强代码的类型安全性和可读性
为什么还要使用 type Ref：
  1、提高代码可读性：当开发者看到 Ref<IUser> 时，会更明确地知道这是一个响应式变量，而不是普通对象或其他类型变量，在代码审阅和协作时尤其有用
  2、必须明确分离定义与赋值的场景：如果变量的定义和赋值是分开的，必须显式声明类型，否则 TypeScript 会报错
  3、用于函数返回值的类型注解
  4、当你将响应式变量作为函数的返回值时，需要使用 type Ref 明确指定类型
  5、提升类型检查的精确性：当 ref 的初始值是 null 或 undefined 时，需要显式地使用 type Ref 来指定类型，否则 TypeScript 会推断为 Ref<null>
-->
<template>
  <div id="wrap">
    <h1>setup 语法糖支持ts写法</h1>
    <div class="par">
      <p>{{ userInfo.username }}</p>
      <p>{{ userInfo.sex }}</p>
      <p>{{ userInfo.age }}</p>
      <p>{{ userInfo2.username }}</p>
      <p>{{ userInfo2.sex }}</p>
      <p>{{ userInfo2.age }}</p>
      <!-- <p>{{ num }}</p> -->
      <p>{{ data.age }}</p>
      <DeepDemo class="comson2000" />
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'dayStuDemo7',
}
</script>

<script lang="ts" setup>
import { ref, type Ref } from 'vue'
import DeepDemo from './components/DeepDemo.vue'
//定义用户信息接口
interface IUser {
  username: string
  sex: string
  age: number
}
// //响应式的数据
// const userInfo = ref<IUser>({
//   username: '小明',
//   sex: '男',
//   age: 18,
// })
// const userInfo2 = ref<IUser>({
//   username: '小红',
//   sex: '女',
//   age: 16,
// })
//响应式的数据
const userInfo: Ref<IUser> = ref({
  username: '小明',
  sex: '男',
  age: 18,
})
const userInfo2: Ref<IUser> = ref({
  username: '小红',
  sex: '女',
  age: 16,
})
// let num: Ref<number> //显示声明类型
// num = ref(123)
//类型注解
function userInfo3(): Ref<IUser> {
  const userInfo4 = ref<IUser>({
    username: '小刚',
    sex: '男',
    age: 18,
  })
  return userInfo4
}
const data = userInfo3()

//错误的演示
// const userInfo5 = ref(null)
// console.log(typeof userInfo5.value)
//正确的：显示指定类型
// const userInfo6: Ref<IUser | null> = ref(null)
// if (userInfo6.value) {
//   console.log(userInfo6.value.username)
// }
</script>

<style scoped lang="scss">
#wrap {
  width: 100%;
  height: 100%;
  text-align: center;
  h1 {
    color: white;
  }
}
//推荐公用css样式封装到独立的文件引入
// .par {
//   color: blue;
//   border: 3px solid pink;
// }
// .son {
//   color: yellow;
// }
// @use '@/assets/common.scss';  //不生效，找一下解决方案
// @import '@/assets/common.scss';//不生效，找一下解决方案
// @import url('@/assets/common.scss');//生效
// 使用 @import 引入 SCSS 文件
//@import '@/assets/common.scss';//生效
// 或者使用 @use 引入 SCSS 文件

</style>
<!--
!1. @import 'path/to/file.scss'：这种导入方式用于引入本地的 SCSS 或 Sass 文件，并将其内容编译为 CSS。SCSS 文件通常包含变量、混合宏（mixin）、函数、样式等代码片段。
  + 作用: 将本地的 variables.scss 文件引入当前文件，并将其内容作为当前 SCSS 文件的一部分进行编译。
  + 处理: Webpack 使用 sass-loader 会解析并处理 .scss 文件，然后编译为最终的 CSS。
  + 依赖管理: 通过 Webpack 配置中的 resolve.alias（如 @assets）解析路径。
  + 预处理: 该导入方式支持 Sass 特性，例如变量、嵌套、mixin 等。
!2、@import url('path/to/file.css')：这种导入方式用于引入已经存在的 CSS 文件 或带有 URL 的外部样式资源
  + 作用: 这里的 url() 是直接引用某个样式表（如 .scss、.css 文件或在线的样式文件）。这表示浏览器会根据提供的 URL 加载这个文件。
  + 处理: 虽然此处导入的是 .scss，但是 url() 主要用作引入 外部资源，Webpack 通常不会对其进行 SCSS 解析，而是像加载普通 CSS 文件一样处理。
  + 外部资源: 如果你引用的 URL 指向外部资源或服务器上的样式文件，浏览器会通过网络请求下载该文件并应用样式。
  + 限制: 不支持 Sass 特性。使用 url() 导入的文件通常是纯 CSS 文件，因此它不支持变量、嵌套等 SCSS 特性。
-->
